<template>
    <div class="detail-view-container">
        <TopNavCom />

        <div v-if='(courseDetail) && (Object.keys(courseDetail).length)'>
            <CourseInfoCard id="courseInfoCard" :courseDetail="courseDetail"   />
        </div>
        <div v-if='(courseDetail) && (Object.keys(courseDetail).length) '>
            <CourseDetailBody id="courseDetailBody" :courseDetail="courseDetail"  />
        </div>

        <FooterCom />


    </div>
</template>

<script>
import TopNavCom from '@/components/TopNavCom.vue'
import CourseInfoCard from './components/CourseInfoCard.vue'
import CourseDetailBody from './components/CourseDetailBody.vue'
import FooterCom from '@/components/FooterCom.vue'
import { getCourseDetail } from '@/api/request.js'
export default {
    name: 'DetailView',
    components: {
        TopNavCom,
        FooterCom,
        CourseInfoCard,
        CourseDetailBody
    },
    data() {
        return {
            courseDetail: {},
            score:0.0,
        }
    },
    created() {
        console.log('DetailView', this.$route.params.id);
        getCourseDetail(this.$route.params.id).then((result) => {
            this.score=result.score;
            this.courseDetail = result.data;
            console.log('getCourseDetail', this.courseDetail);
            
        }).catch((err) => {
            console.log(err);

        });
    }
}
</script>

<style lang="less" scoped>
.detail-view-container {
    background-color: rgb(244, 244, 244);
}

#courseInfoCard {
    // margin: 100px 0;
}
</style>
